<template>
	<view class="container" @tap.stop="onClickBgView">
		<view @tap.stop="onStopClick" class="erji" mousemove="false">
			<scroll-view class="background-color-F8F8F8 sanji"
				:style="'max-height:' + maxHeight + 'vh;background: white;'" scroll-y="true"
				scroll-with-animation="true">
				<view style="position: absolute;margin-left: 310rpx;">
					<image @tap="close" src="https://mcdn.chatgk.com/xcx/static/images/chancePageImg/gb.png"
						style="position: relative;right: -350rpx;top:20rpx;height: 60rpx;width: 60rpx;">
					</image>
				</view>
				<view class="container-screening-list" v-for="(list, index) in data" :key="list.tag">
					<view class="" style="display: flex;">
						<text class="title background-color-F8F8F8" style="padding-left: 10rpx;">{{list.title}}</text>
						<text
							style="	color: #6c6c6c;font-size: 20rpx;font-weight: bold;margin-top: 42rpx;margin-bottom: 20rpx;margin-left: 5rpx;">({{list.conditions?list.conditions:'多选'}})</text>
					</view>
					<view class="container-items" v-if="!list.danxuan">
						<view v-for="(item, itemKey, index) in list.data" :key="itemKey">
							<button class="item-n" :class="getSelectClass(list.tag, itemKey)"
								@tap.stop="onClickItem(list.tag, itemKey, item)">{{item}}</button>
						</view>
					</view>
					<view v-if="list.danxuan" style="margin: 20rpx 30rpx 20rpx 30rpx;">
						<view v-for="(item, itemKey, index) in list.data" class="container-itemss" :key="itemKey">
							<text class="item-nn" :class="getSelectClasss(list.tag, itemKey)"
								@tap.stop="onClickItem(list.tag, itemKey, item)">{{item}}</text>
							<image @tap.stop="onClickItem(list.tag, itemKey, item)"
								:src="getSelectClasss(list.tag, itemKey) != ''?'https://mcdn.chatgk.com/xcx/static/images/searchcollege/contrast_sel_s.png':'https://mcdn.chatgk.com/xcx/static/images/searchcollege/contrast_sel_n.png'"
								style="height: 30rpx;width: 30rpx;margin-right: 17rpx;"></image>
						</view>
					</view>
				</view>
			</scroll-view>

			<view class="flex-row space-around container-button" v-if="returnTrue()">
				<button class="button reset" @tap="onClickReset">清空</button>
				<button class="button ok" @tap="onClickStartFilter">确定</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			data: {
				type: Object,
				default: () => {}
			},
			isnulls: {
				type: Number,
				default: 0
			},
			maxHeight: {
				type: Number,
				default: 60
			}
		},
		data() {
			return {
				selectData: {},
				selectItemData: {},
				seleindex: ""
			}
		},
		watch: {
			data: {
				handler(val) {},
				deep: true,
				immediate: true
			},

			isnulls: {
				handler(newVal) {
					if (newVal == 1) {
						this.selectData = {}
						this.selectItemData = {}
					}
				},
				immediate: true,
				deep: true
			},
			selectData: {
				handler(newVal) {
					const fType = this.selectData["fType"] || []
					const hasZJ = this.selectData["hasZJ"] || []
					const province = this.selectData["province"] || []
					const school_feature = this.selectData["school_feature"] || []
					const type = this.selectData["type"] || []
					const advanced_screen = this.selectData["advanced_screen"] || []

					if (province.length == 0) {
						this.selectData["province"] = ["0"]
					}

					if (school_feature.length == 0) {
						this.selectData["school_feature"] = [0]
					}

					if (type.length == 0) {
						this.selectData["type"] = [0]
					}

					if (fType.length == 0) {
						this.selectData["fType"] = ["0"]
					}

					if (hasZJ.length == 0) {
						this.selectData["hasZJ"] = ["0"]
					}

					if (advanced_screen.length == 0) {
						this.selectData["advanced_screen"] = ["0"]
					}
				},
				immediate: true,
				deep: true
			}
		},
		methods: {
			returnTrue() {

				if (this.data.length == 1) {
					if (this.data[0].title != '排序') {
						return true
					} else {
						this.data[0].title
						return false
					}
				} else {
					return true
				}

			},
			close() {
				this.$emit('opensub')
			},
			// 点击背景其他位置隐藏筛选
			onClickBgView() {
				this.$emit("onClickHideScreening")
			},
			onStopClick() {
				// 阻止点击筛选视图触发隐藏事件
			},
			// 点击筛选项
			onClickItem(tag, key, item) {
				this.seleindex = item

				// 初始化各个类型的字典数据
				if (!this.selectItemData[tag]) {
					this.selectItemData[tag] = {}
				}

				if (tag == 'fType' || tag == 'hasZJ') {
					// 判断是否选择了 全部、不限、全国
					if (key == "0" || key == 0) {
						this.selectData[tag] = []
						this.selectData[tag].push(key)
						delete this.selectItemData[tag]
						return
					}

					if (tag == 'fType') {
						this.selectData[tag] = []
						this.selectData[tag].push(key)

						// 未选择 全部、不限、全国 清除 全部、不限、全国 标签
						let index = this.selectData[tag].indexOf("0")
						let index2 = this.selectData[tag].indexOf(0)
						if (index !== -1) {
							this.selectData[tag].splice(index, 1)
						} else if (index2 !== -1) {
							this.selectData[tag].splice(index2, 1)
						}

						let findIndex = Object.keys(this.selectItemData[tag]).length
						if (findIndex > 0) {
							delete this.selectItemData[tag]['不看中外']
							delete this.selectItemData[tag]['只看中外']
							this.selectItemData[tag][item] = key
						} else {
							this.selectItemData[tag][item] = key
						}

					} else {
						this.selectData[tag] = []
						this.selectData[tag].push(key)
						let findIndex = Object.keys(this.selectItemData[tag]).length
						if (findIndex > 0) {
							delete this.selectItemData[tag]["不看征集"]
							delete this.selectItemData[tag]["只看征集"]
							this.selectItemData[tag][item] = key
						} else {
							this.selectItemData[tag][item] = key
						}
					}
				} else if (tag == 'order') {

					this.selectData[tag] = []
					// this.selectItemData = []
					this.selectData[tag].push(key)

					let findIndex = Object.keys(this.selectItemData[tag]).length
					if (findIndex > 0) {
						this.selectItemData[tag][item] = key
					} else {
						this.selectItemData[tag][item] = key
					}
					// return
					this.$emit("danuxanbut", -1)
					this.$emit('orderChange', this.selectItemData)
					this.onClickStartFilter()
				} else {
					if (!this.selectData[tag]) {
						this.selectData[tag] = []
					}

					// 判断是否选择了 全部、不限、全国
					if (key == "0" || key == 0) {
						this.selectData[tag] = []
						this.selectData[tag].push(key)
						delete this.selectItemData[tag]
						return
					}

					// 未选择 全部、不限、全国 清除 全部、不限、全国 标签
					let index = this.selectData[tag].indexOf("0")
					let index2 = this.selectData[tag].indexOf(0)
					if (index !== -1) {
						this.selectData[tag].splice(index, 1)
					} else if (index2 !== -1) {
						this.selectData[tag].splice(index2, 1)
					}

					this.data.forEach(info => {
						if (info["tag"] == tag && info["conditions"] == "单选") {
							this.selectData[tag] = []
							this.selectItemData[tag] = {}
						}
					})

					let findIndex = this.selectData[tag].findIndex(i => i == key)

					if (findIndex > -1) {
						this.selectData[tag].splice(findIndex, 1)
						delete this.selectItemData[tag][item]
					} else {
						this.selectData[tag].push(key)
						this.selectItemData[tag][item] = key
					}
				}

			},
			// 点击重置
			onClickReset() {
				this.data.forEach(item => {
					this.selectData[item.tag] = []
					this.selectItemData[item.tag] = {}
				})

				this.seleindex = ""
			},
			// 点击确定 将保存好的值存储好
			onClickStartFilter() {
				this.$emit("onClickStartFilter", this.selectData, this.selectItemData)
				this.$emit("seleteArrs", this.selectData, this.selectItemData)

			},
			// 获取筛选项选中样式
			getSelectClass(tag, item) {
				if (!this.selectData[tag]) {
					return ''
				} else {
					return this.selectData[tag].some(i => i == item) ? 'item-s' : ''
				}
			},
			getSelectClasss(tag, item) {
				if (!this.selectData[tag]) {
					return ''
				} else {
					return this.selectData[tag].some(i => i == item) ? 'item-ss' : ''
				}
			},
		}
	}
</script>

<style>
	button::after {
		border: none;
	}

	/* view { */
	/* background-color: #f8f8f8; */
	/* } */

	.container {
		height: 100vh;
		width: 100vw;
		background-color: rgba(0, 0, 0, 0.6);
		position: fixed;
		top: 0;
		z-index: 9999;
	}

	.erji {
		border-radius: 50rpx 50rpx 0 0;
		width: 100vw;
		max-height: 90%;
		position: absolute;
		bottom: 0;
		padding-top: 20rpx;
		overflow: hidden !important;
	}

	.sanji {
		border-radius: 50rpx 50rpx 0 0;
		position: sticky;
		top: 0;
		overflow: hidden;
	}

	.container-screening-scroll {
		max-height: 50vh;
	}

	.container-screening-list {
		display: flex;
		flex-direction: column;
		border-radius: 50rpx 50rpx 0 0;
		overflow: hidden;
	}

	.container-items {
		display: flex;
		flex-wrap: wrap;
		/* margin-left: 30rpx; */
		/* margin-right: 40rpx; */
	}

	.container-itemss {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
		border-bottom: 1rpx solid gainsboro;
	}

	.title {
		color: #333333;
		font-size: 30rpx;
		font-weight: bold;
		margin-top: 35rpx;
		margin-bottom: 20rpx;
		margin-left: 32rpx;

	}

	.item-n {
		width: 160rpx;
		min-height: 64rpx;
		background-color: #ebebeb;
		border-radius: 10rpx;
		font-size: 20rpx;
		color: #464646;
		/* font-weight: bold; */
		margin: 6rpx 0rpx 14rpx 22rpx;
		line-height: 64rpx;
	}

	.item-nn {
		width: 80vw;
		min-height: 64rpx;
		/* background-color: #ebebeb; */
		border-radius: 10rpx;
		font-size: 24rpx;
		color: #464646;
		/* font-weight: bold; */
		margin: 0 2rpx 0 20rpx;
		line-height: 64rpx;
	}

	.item-s {
		background-image: url("https://mcdn.chatgk.com/xcx/static/images/icon/kuang.png");
		background-size: 160rpx 64rpx;
		color: #ed302e;
		/* border: 0.5rpx solid #ed302e; */
	}

	.item-ss {
		/* background-image: url("https://mcdn.chatgk.com/xcx/static/images/icon/kuang.png"); */
		/* background-size: 176rpx 64rpx; */
		color: #ed302e;
		/* border-bottom: 1rpx solid gainsboro; */
		/* border: 0.5rpx solid #ed302e; */
	}

	.container-button {
		background-color: #FFF;
		display: flex;
		justify-content: space-between;
		min-height: 110rpx;
	}

	.button {
		width: 300rpx;
		height: 70rpx;
		line-height: 70rpx;
		margin: 20rpx 60rpx;
		font-size: 28rpx;
		font-weight: bold;
		border-radius: 38rpx;
	}

	.button.reset {
		color: #f23525;
		background-color: white;
		border: #FF3B0A 2rpx solid;
	}

	.button.ok {
		color: #FFF;
		background-color: #f23525;
	}
</style>